<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='550px'  :fullscreen = 'Global.currentDevice'>
        
        <el-tabs  >
              <el-tab-pane label="账户信息" name="first"></el-tab-pane>
        </el-tabs>
        <el-row>
              <el-col  :xs='24' :lg='20'>
                    <el-form   align='left' :model="form" ref='form'  :label-position='Global.dialog_label_Position'>
                              <el-form-item label="账户名称："  prop='accountName'  label-width="120px">
                                      <el-input v-model.trim="form.accountName" placeholder='请输入账户名称'></el-input>
                              </el-form-item>
                              <el-form-item label="地区："      prop='province'  class='inline-block w-50' label-width="120px">
                                      <el-select v-model.trim="form_add.province" placeholder="请选择"  class='' filterable @change='(val)=>getDis(val)'>
                                            <el-option
                                              v-for="item in address.province"
                                              :key="item.areaId"
                                              :label="item.areaName"
                                              :value="item.areaId">
                                            </el-option>
                                      </el-select>
                              </el-form-item>
                              <el-form-item     prop='district'  class='inline-block w-23'>
                                      <el-select v-model.trim="form_add.district" placeholder="请选择"  class='' :disabled='dis_disabled'  @change='(val)=>getCity(val)'>
                                            <el-option
                                              v-for="item in address.district"
                                              :key="item.areaId"
                                              :label="item.areaName"
                                              :value="item.areaId">
                                            </el-option>
                                      </el-select>
                              </el-form-item>
                              <el-form-item      prop='city'  class='inline-block w-23'>
                                      <el-select v-model.trim="form_add.city" placeholder="请选择"  class=''  :disabled='city_disabled'>
                                            <el-option
                                              v-for="item in address.city"
                                              :key="item.areaId"
                                              :label="item.areaName"
                                              :value="item.areaId">
                                            </el-option>
                                      </el-select>
                              </el-form-item>
                              <el-form-item label="支行名称："  prop='subbranchName'  label-width="120px">
                                      <el-input v-model.trim="form.subbranchName"  placeholder='请输入支行名称'></el-input>
                              </el-form-item>
                              <el-form-item label="银行账号："  prop='bankAccount'  label-width="120px">
                                      <el-input v-model.trim="form.bankAccount" placeholder='请输入银行账号' ></el-input>
                              </el-form-item>  
                    </el-form>
              </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
              <el-button @click="close()">取 消</el-button>
              <el-button type="primary" @click="submit('form')">确 定</el-button>
        </div>
  </el-dialog>
</template>

<script charset="utf-8" type="text/javascript">
//接口  引入 
import {  getAreaBy ,getDisBy ,getCityBy }  from  '@/api/common/getArea'

export default {
  name: 'bankCount',
  data() {
 
    return {
      loading: false,
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: '新增账户'
      },

      //绑定form
      form:{
        accountName:'',
        subbranchName:'',
        bankAccount:'',
        accountArea:''
      },

      //省市区 绑定值
      form_add:{
        province:'',
        district:'',
        city:'',
      },
      //省市区列表
      address:{
        province:'',
        district:'',
        city:'',
      },
      dis_disabled:true,
      city_disabled:true,

      current_index:null,//编辑当前的index

      isEdit:false,//是不是已经编辑状态  默认新增
      currentEditCode:'',//编辑状态下获得的code

    }
  },
  created(){
      this.getArea()
  },
  methods: {

    submit(formName) {
      // console.log(this.form)
      //let subform=this.form//这是什么奇怪的bug？？？？？
      this.form.accountArea=this.form_add.province + ',' + this.form_add.district + ',' +this.form_add.city
      //编辑
      if(this.isEdit == true ){
        // console.log(this.currentEditCode)
        //编辑新增的
        if(this.currentEditCode == ''){
            this.$emit('save-finished',{accountName:this.form.accountName,
                                       accountArea: this.form.accountArea,
                                        subbranchName:this.form.subbranchName,
                                        bankAccount:this.form.bankAccount},this.current_index)
        }
        //编辑原来的
        else{
            this.$emit('save-finished',{code:this.currentEditCode,accountName:this.form.accountName,
                                       accountArea: this.form.accountArea,
                                        subbranchName:this.form.subbranchName,
                                        bankAccount:this.form.bankAccount},this.current_index)
        }
        
        
           
      }
      //新增
      else{
          this.$emit('save-finished',{accountName:this.form.accountName,
                                       accountArea: this.form.accountArea,
                                        subbranchName:this.form.subbranchName,
                                        bankAccount:this.form.bankAccount})

      }
      this.close()
        
    },

    //获取省市区
    getArea(){
        getAreaBy().then(response=>{
          // if(response.data.flag == true){
            this.address.province=response.data;
          // }  
        }).catch(error=>{
          console.log(error)
        })
    },
    //获取市
    getDis(val,str){
      if(!str){
          this.address.district=[]
          this.address.city=[]
          this.form_add.district=''
          this.form_add.city=''
          this.city_disabled=true
      }

      getDisBy(val).then(response=>{
            // if(response.flag == true){
                let code
                [this.address.district,code]=[response.data,response.data[0].areaId]
                if(this.address.district.length == 1){
                    this.form_add.district=code
                    this.getCity(code)
                }          
                this.dis_disabled=false
            // }
          
      }).catch(error=>{
        console.log(error)
      })
    },
    getCity(val){
        getCityBy(val).then(response=>{
          // if(response.data.flag == true){
              this.address.city=response.data
              this.city_disabled=false
          // }
          
        }).catch(error=>{
          console.log(error)
        })
    },
    close(){
      //close 也可能是编辑时 关闭 这个时候初始值还是会被改变
        this.dialogProps.visible=false
        // if(this.isEdit == true){  //编辑打开 取消 form清空，新增打开form为空；新增点取消，reset，认为编辑打开时的值是初始值，所以又赋值回去了。因为编辑刚打开的时候已经给form赋值，所以会认为那个就是初始值；解决方法还是需要在打开时初始化form值
            // 绑定form清空                                                        
            this.form ={
              accountName:'',
              subbranchName:'',
              bankAccount:'',
              accountArea:''
            }
            // console.log(this.form)
        // }
        // else{
        //     // this.resetForm('form')  2
        //     console.log(this.form)
        // }

        //初始省市区，建议也可以放在关闭弹框时，减少重复代码  ---√
        this.form_add.province=''  
        this.form_add.district=''
        this.form_add.city=''
        this.address.district=[]
        this.address.city=[]

        this.current_index = null

    }  
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openDialog', function() {
            //this.resetForm('form')//为什么清空无用？ 第一次打开为undefined；prop属性绑定   ----1
            //绑定form清空                                                              ------2
                // this.form={
                //   accountName:'',
                //   subbranchName:'',
                //   bankAccount:'',
                //   accountArea:''
                // }每次新增 打开时 初始化 form。 但是发现仍然有问题：打开编辑后再打开新增，仍然会有上次存在的数据。
                //推测  resetFields （对整个表单进行重置，将所有字段值重置为初始值并移除校验结果），这里的初始值可能在打开编辑时 原有编辑值已经被改变为初始值了。所以初始化需要在关闭弹框时实现。

            /*important 设置初始值，这样使用reset也不会出错  2*/
            // this.form ={
            //   accountName:'',
            //   subbranchName:'',
            //   bankAccount:'',
            //   accountArea:''
            // }
            this.dialogProps.visible = true
            this.dialogProps.title='新增账户'
            this.isEdit=false;
            // this.form = {}//清空不能直接设为空 坑 因为可能无法绑定值
      })
      this.$on('openEditDialog',function(data,index){

            this.dialogProps.visible=true
            this.dialogProps.title='编辑账户'
            this.isEdit=true
            this.current_index=index //当前编辑对应的index

            /*important   2*/
            // this.form ={
            //   accountName:'',
            //   subbranchName:'',
            //   bankAccount:'',
            //   accountArea:''
            // }

            // console.log(data)
            /*数据回填处理*/
            let proxy = new Proxy(data, {
                  get: function(target, property) {
                    if(property == 'accountArea' || property == 'accountName'  || property == 'bankAccount' || property == 'subbranchName' || property == 'code')
                    return target[property];
                  }
            });
            [this.form.accountName,this.form.subbranchName,this.form.bankAccount,this.form.accountArea] = [proxy.accountName,proxy.subbranchName,proxy.bankAccount,proxy.accountArea]

            //省市区回填
            let arr = this.form.accountArea.split(',');
            [this.form_add.province,this.form_add.district,this.form_add.city] = [(arr[0])>0? Number(arr[0]) : '',(arr[1])>0? Number(arr[1]) :'',(arr[2])>0? Number(arr[2]) :'']

            //编辑原来存在的银行账户，有code
            if(data.code){
                [ this.currentEditCode ] = [ proxy.code ]
                this.getDis(this.form_add.province,'direct')
                this.getCity(this.form_add.district)
            }
            ////编辑新添加的银行账户，无code
            else{
                this.dis_disabled=false
                this.city_disabled=false
            }
        
      })
    })
  },
  updated(){
    
  },
  components:{
    
  }
}
</script>

<style  scoped>
</style>


